<template>
  <!-- 已开订单 -->
  <div class="main-content-container">
    <div ref="search" class="app-search">
      <el-form label-width="auto" class="top">
        <el-row type="flex">
          <el-col :span="12" class="searchs-y">
            <el-form ref="searchFormRef" label-width="80px" :inline="true">
              <el-form-item>
                <el-input v-model="custQuery" placeholder="姓名、手机号、会员号" clearable @change="handleChange">
                  <el-button slot="append" icon="el-icon-search" @click="handleChange" />
                </el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col class="buttons box-r">
            <el-button plain @click="seeRecharge"> +充值 </el-button>
            <el-button plain @click="handleEadit(1)"> +开单 </el-button>
          </el-col>
        </el-row>
        <el-row class="float-l">
          <!-- <el-col> -->
          <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
          <!-- </el-col> -->
          <!-- <el-col :span="3" :offset="1"> -->
          <el-form-item>
            <dictionary-selector placeholder="请选择付款类型" class="el-select-y" code="swan_order_type" :value.sync="remedyType" @change="handle(remedyType)" />
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="3"> -->
          <el-form-item>
            <el-select v-model="consultantValue" clearable class="el-select-y" @change="handleConsultantValue(consultantValue)">
              <el-option v-for="item in options" :key="item.id" :label="item.usrName" :value="item.usrName" />
            </el-select>
          </el-form-item>
          <!-- </el-col> -->
        </el-row>
        <el-row class="mounteds">
          <!-- <Search :data="tabsName" :attribute="'createdTime'" @change="handleTypeChange" /> -->
          <Tabs v-model="orderStatus" :data="tabsName" @change="searchChange" />
        </el-row>
      </el-form>
    </div>

    <div class="box-show" :style="'height:'+ (innerHeight + 86) + 'px'">
      <el-table v-loading="loading" :data="list1" style="width: 100%" border :row-class-name="tableColor" :height="innerHeight">
        <el-table-column prop="dataCode" label="订单号" :show-overflow-tooltip="true" />
        <el-table-column prop="customerName" label="顾客" :show-overflow-tooltip="true" />
        <el-table-column prop="customerSex" label="性别" :show-overflow-tooltip="true" />
        <el-table-column prop="orderContent" label="订单内容" :show-overflow-tooltip="true" />
        <el-table-column prop="amount" label="金额" :show-overflow-tooltip="true" />
        <el-table-column prop="createdTime" label="开单时间" :show-overflow-tooltip="true">
          <template slot-scope="{ row }">
            <span>{{ parseTime(row.createdTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderMan" label="开单人" :show-overflow-tooltip="true" />
        <el-table-column prop="orderType" label="类型" :show-overflow-tooltip="true" />
        <!-- <el-table-column prop="approveStatu" label="审批状态" :show-overflow-tooltip="true" /> -->
        <el-table-column prop="orderStatus" label="状态" :show-overflow-tooltip="true" />
        <el-table-column label="操作" width="140">
          <template slot-scope="{ row }">
            <el-button type="text" size="small" @click="seeDetails(true, row.id, row.customerId)">查看</el-button>
            <el-button v-if="row.orderStatus === '待付款'" type="text" size="small" @click="handleEadit(row)">修改</el-button>
            <el-button v-if="row.orderStatus === '待付款'" type="text" size="small" @click="orderCancel(row.id)">取消</el-button>
            <el-button
              v-if="
                row.orderStatus === '已付定金' || row.orderStatus === '已付款'
              "
              type="text"
              size="small"
              @click="chargeBack(true, row)"
            >退款</el-button>
            <el-button v-if="row.orderStatus === '待退货'||(row.orderStatus === '退款中'&&row.isReturn==='不需要')" type="text" size="small" plain @click="withdraw(row.id)">撤回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />
    </div>

    <OrderDetails :visible.sync="visible" :customer-id="customerId" :order-details-id="OrderDetailsId" @seeDetails="seeDetails" />
    <Chargeback :visible.sync="visible1" :customer-data="customerData" :title="title" @chargeBack="chargeBack" />
    <Billing ref="billing" :billing-data="billingData" :bill-type="'咨询开单'" @cancels="billing = false" @success="getList" />
    <Recharg :visible.sync="rechargVisible" :ids="ids" @cancels="(rechargVisible = false), (ids = '')" />
  </div>
</template>
<script>
window.onbeforeunload = event => {
  window.scrollTo(0, 0); // 每次刷新，滚动条在页面最上面
};
import { DictionarySelector } from "@rabbit.do/rabbit";
import Search from "@/components/Search";
import { selections } from "@/config";
import OrderDetails from "./orderDetails.vue";
import Chargeback from "./chargeback.vue";
import Tabs from "@/components/SearchSelection";
import Billing from "../doctor/billing.vue"; // 修改
import Recharg from "../task/recharge.vue";
import { tableColor, labelHeigh } from '@/utils/common.js';
export default {
  components: {
    Search,
    DictionarySelector,
    OrderDetails,
    Chargeback,
    Tabs,
    Billing,
    Recharg,
  },
  data() {
    return {
      tableColor,
      innerHeight: null,
      loading: false,
      title: "",
      OrderDetailsId: "",
      url: "",
      ids: "",
      custQuery: "",
      selections,
      customerId: "",
      visible: false,
      billing: false,
      consultantValue: "请选择开单人",
      billingData: {},
      visible1: false,
      rechargVisible: false,
      orderStatus: "待付款",
      remedyType: "",
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      customerData: {},
      searchForm: {
        value3: "",
      },
      list1: [],
      input3: "",
      options: [],
      tabsName: [
        { id: "全部", name: "全部" },
        { id: "待付款", name: "待付款" },
        { id: "已付款", name: "已付款" },
        { id: "已付定金", name: "已付定金" },
        { id: "待退货", name: "待退货" },
        { id: "已取消", name: "已取消" },
        { id: "退款中", name: "退款中" },
        { id: "已退款", name: "已退款" },
      ],
      search: {
        orderStatus: "待付款",
        timeType: "today",
        createdTime:
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 00:00:00" +
          "_" +
          new Date().getFullYear() +
          "-" +
          (new Date().getMonth() + 1) +
          "-" +
          new Date().getDate() +
          " 23:59:59",
      },
      values: 1, // 控制表格是待咨询还是已咨询的
      // choice: true,
    };
  },
  created() {
    if (this.$route.query.isPopup) {
      this.$router.push({
        query: {},
      });
    }
  },
  mounted() {
    this.getList();
    this.attributionConsultant();
    this.innerHeight = labelHeigh(this.$refs.search);
  },
  methods: {
    eliminate() {
      this.custQuery = "";
      this.search = {};
      this.queryParams.page = 1;
      this.getList();
    },
    handleChange() {
      this.queryParams.page = 1;
      this.getList();
    },
    async attributionConsultant() {
      // 获取咨询师下拉框的数据
      const res = await this.$api["data/hospitalStaff/getAllByJobName"]({
        hospitalJobName: "咨询师",
      });
      if (res.code !== 200) return;
      this.options = [
        // { id: "-9999", usrName: "不限开单人" },
        { id: "-9998", usrName: "只看我" },
      ];
      res.data.forEach((item) => {
        this.options.push(item);
      });
    },
    handleEadit(row) {
      // 点击修改
      if (row === 1) {
        this.billing = true;
        this.billingData = { orderPaymentStyle: "全款", customerName: '' };
        // this.choice = true;
        this.$refs.billing.createBill(this.billingData);
      } else {
        this.billingData = row;
        // this.choice = false;
        this.$refs.billing.editBill(row);
      }
      // // this.OrderDetailsId = id;
      // this.billing = true;
      // this.$nextTick(() => {
      //   this.$refs.billing.init();
      // });
    },
    async orderCancel(id) {
      const confirmResult = await this.$confirm("请确认是否取消?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult === "confirm") {
        this.loading = true;
        this.$api["doctor/consulting/orderCancel"]({ id: id }).then((res) => {
          if (res.code !== 200) return;
          this.getList();
          this.loading = false;
          return this.$message.success("已取消成功");
        });
      }
    },
    async withdraw(id) {
      // 点击撤回按钮
      const confirmResult = await this.$confirm("请确认是否撤回?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消撤回");
      } else {
        this.$api["doctor/consulting/rebackOrder"]({ id }).then((res) => {
          if (res.code !== 200) return;
          this.getList();
        });
      }
    },
    seeDetails(bool, id, customerId) {
      // 点击查看
      if (id) {
        this.OrderDetailsId = id;
        this.customerId = customerId;
      } else {
        this.OrderDetailsId = undefined;
      }
      this.visible = bool;
    },
    chargeBack(bool, row) {
      // 点击退单
      this.visible1 = bool;
      if (!bool) {
        this.customerData = {};
        this.getList();
      }
      if (row) {
        this.customerData = { customerId: row.customerId, id: row.id };
        if (row.orderStatus === "已付款") {
          this.title = "退单";
        } else if (row.orderStatus === "已付定金") {
          this.title = "退单-定金";
        }
      }
    },
    clearNoNum(obj) {
      console.log(obj, "ifhdiuf");
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
    },
    addCustomer() {
      this.$router.push({
        path: "/swan/customer/customers",
        query: {
          isPopup: true,
        },
      });
    },
    async seeRecharge() {
      this.rechargVisible = true;
      // if (id) { // 点击充值
      //   this.ids = id;
      // }
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    getList() {
      // 请求列表的数据
      this.$api["doctor/consulting/list"]({
        ...this.queryParams,
        query: this.search,
        custQuery: this.custQuery,
      }).then((res) => {
        if (res.code !== 200) return;
        this.list1 = res.data.result;
        this.total = res.data.total;
        console.log(res, "咨询开单订单列表数据88888");
      });
    },
    handle(val) {
      if (val) {
        this.$set(this.search, "orderType", val);
      } else {
        this.$set(this.search, "orderType", "");
      }
      this.getList();
    },
    handleConsultantValue(val) {
      if (val) {
        if (val === "不限开单人") {
          this.$set(this.search, "orderMan", "");
        } else if (val === "只看我") {
          this.$set(
            this.search,
            "orderMan",
            this.$store.getters.currentUserInfo.usrName
          );
        } else {
          this.$set(this.search, "orderMan", val);
        }
      } else {
        this.$set(this.search, "orderMan", "");
      }

      this.getList();
    },
    searchChange(e) {
      // Tabs切换的方法函数
      Object.assign(this.search, { orderStatus: e === "全部" ? "" : e });
      this.getList();
    },
    handlePaginationChange(pagination) {
      // 分页
      this.queryParams = {
        page: pagination.pageNum,
        pageSize: pagination.pageSize,
      };
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}
// .el-table {
//   margin: 0 0 60px;
// }
.el-button {
  color: rgb(114, 222, 236);
}
.numberOrder {
  color: #a7a7a7;
  margin-top: 20px;
  font-size: 14px;
  span {
    color: #51abab;
  }
}
.top {
  > div {
    margin-right: 10px;
  }
  .mounteds {
    margin: 0px 0 10px;
  }
}
.spn {
  float: right;
  .inputCss {
    width: 248px;
  }
}
.box-r{
  text-align: right;
}
.el-form-item .el-form-item--small{
  margin-bottom: 0;
}
/deep/ .bg{
  width: 42px !important;
  height: 25px !important;
  margin-top: 10px !important;
  line-height: 8px !important;
}

</style>
